
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        .class{font-size: 20px ;color: red}
        .class1{font-size: 15px;color: grey}
        #fifth{
            width:344px;
            font-size: 5px;
            margin-left:400px;
        }
        body{margin:0;padding:0;}
        ul{margin:0px;padding:0px;}
        li{
            list-style:none;
        }
        a:link{
            text-decoration:none;
            color:#000;
        }
        a:visited{
            text-decoration:none;
            color:#000;
        }
        a:hover{
            text-decoration:none;
            color:#000;
        }
        a:active{
            text-decoration:none;
            color:#000;
        }
        .clearfix:before,.clearfix:after{
            display:table;
            content:"";
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            *zoom:1;
        }
        #div{position:absolute;z-index:0;background:#fff;border: 1px solid darkorange;width: 552px;margin-left:334px;margin-top:44px;}
        .wrap{width:960px;margin:0 auto;}
        .wrap .top{height:30px;background:#eee;}
        .wrap .top .top-left{float:left; font-size: 5px;margin-top:7px;}
        .wrap .top .top-right{float:right;font-size: 5px;margin-top:7px;}
        .wrap .content{margin-top:20px;}
        .wrap .content .logo{width:214px;height:63px;float:left;background:url("taobao_03.jpg") no-repeat;margin-left:20px;}
        .wrap .content .search{float:left;width:510px;margin-left:150px;margin-top:10px;margin-bottom:10px;}
        .wrap .content .search .search-1{border-color:sandybrown;outline: none;width:500px;height:30px;border:2px solid #ff4200;margin-left: -50px}
        .wrap .content .search .search-2{border-color:sandybrown;outline: none;width:50px;height:35px;margin-left:-8px;background:#ff4200;border:none;}
        .wrap .image{margin-top:20px;}
        .wrap .image li{float:left;width:220px;height:350px;border:0px solid #ccc;margin-left:15px;margin-bottom:10px;}
        /*.wrap .image li:hover{border: 1px solid #ccc}*/
    </style>

    <script type="text/javascript">
        window.onload=function () {
            var inputtext =document.getElementById("input")
            var div = document.getElementById("div")
            var xhr = new XMLHttpRequest()
            var str = "";

            inputtext.onkeyup = function () {
                xhr.open("post","/select")
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
                xhr.send("str="+inputtext.value)

            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4&&inputtext.value!="") {
                    div.innerHTML = xhr.responseText
                }
                else
                    div.innerHTML = "";
            }
        }
//        function domove(){
//            if(inputtext=""){
//                div.style.display="none";
//            }
//            else {
//                div.style.display="block";
//            }
//        }


    </script>

</head>

<body>
<div class="wrap">
    <div class="top clearfix">
        <div class="top-left">
            <a href="denglu.html">登录</a>
            <a href="zhuce.html">免费注册</a>
        </div>
        <div class="top-right">
            <a href="zhuye.html">优衣库主页</a>
            <a href="denglu.html">我的购物车</a>
            <a href="zhuye.html">退出</a>
        </div>
    </div>
    <div class="content clearfix">
        <div class="logo"></div>
        <form class="search clearfix" action="/select" method="post">
            <input type="text" onblur="domove()" placeholder="搜索" id="input" class="search-1">
            <input type="button" value="搜索" class="search-2" id="search">

        </form>
        <div id="div"></div>
        <div id="fifth">
            <a>毛衣&nbsp;&nbsp;&nbsp;</a><a>裙子&nbsp;&nbsp;&nbsp;</a><a>T恤&nbsp;&nbsp;&nbsp;</a><a>外套&nbsp;&nbsp;&nbsp;</a><a>羽绒服</a>
        </div>
    </div>

    <div class="image clearfix">
        <form method="post" action="">
            <ul>
            <li><a href="fuzhuang1.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang2.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang3.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang4.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang5.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang6.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang7.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
            <li><a href="fuzhuang8.html"><img class="show"><div class="class" id="div1"></div><div class="class1"></div></a></li>
        </ul>

        </form>

    </div>
</div>
</body>
<script type="text/javascript">
    var price,name;

       var xhr = new XMLHttpRequest();
       xhr.open("post","/showcloth");
       xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
       xhr.send()
        xhr.onreadystatechange=function () {


            if (xhr.readyState === 4){
                var strs = JSON.parse(xhr.responseText);

                var clazz=document.getElementsByClassName("show")
                var test = document.getElementsByClassName("class")
                var clazz1 = document.getElementsByClassName("class1")
                for(var str in strs){
//                    console.log(str)
//                    console.log(strs[str])
//                    console.log(strs[str].cloth_path)
                    clazz [str-1].src=strs[str].cloth_path
                    price = strs[str].cloth_price
                    name =strs[str].cloth_name
                   // price = ￥+price
                    test[str-1].innerHTML = price
                    clazz1[str-1].innerHTML = name

               }

//                console.log(strs.1)
//                for(var i=0;i<clazz.length;i++){
//
//                    console.log("1")
//
//                }
            }
        }


</script>

</html>
